<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
			.continer{
				width:500px;
				height:400px;
				border: dashed 1px grey;
				padding: 10px;
			}
			.tab-header{
				border-bottom:  solid 1px grey;
				height: 30px;
			}
			
			.tab-header>span{
				display: inline-block;
				height:30px;
				line-height: 30px;
				cursor:pointer;
				margin: 0 10px;
			}
			
			.tab-header>span.active{
				color: #409EFF;
				border-bottom:  solid 3px #409EFF;
			}
			
			.tab-content>div{
				display: none;
			}
			
			.tab-content>div.active{
				display: block;
			}
		
		</style>
		
		<script>
			//onload表示页面加载完成，包括图片，引入的js、css
			function myinit(){
				let tabHeadDiv = document.getElementsByClassName("tab-header")[0];
				let spans = tabHeadDiv.getElementsByTagName("span");//此时执行是没有body
				
				for(let i = 0 ;i<spans.length ;i++){
					spans[i].onclick = function(){
						let selectindex = -1;
						//获取当前选中的元素  this  
						for(let j = 0 ;j<spans.length ;j++){
							spans[j].className = '';  //1去掉所有元素的actives
							if(spans[j] == this){
								selectindex = j; 
							}
						}
						//1去掉所有元素的active
						
						//2 给当前元素添加classs ==active
						this.className = 'active'
						//给内容中对应的div添加active
						selectindex
						let contentDivs = document.getElementsByClassName("tab-content")[0].getElementsByTagName("div");
						for(let j = 0 ;j<contentDivs.length ;j++){
							contentDivs[j].className = '';  //1去掉所有元素的actives
						}
						contentDivs[selectindex].className = 'active'
					}
				}
			}
		</script>
	</head>
	<body onload="myinit()">
		
		<div class="continer">
			<div class="tab-header">
				<span class="active" >用户管理</span> 
				<span>配置管理</span> 
				<span>角色管理 </span> 
				<span>定时任务补偿 </span> 
			</div>
			<div class="tab-content">
				<div class="active" > 用户管理    ....</div>
				<div > 配置管理    ....</div>
				<div> 角色管理    ....</div>
				<div> 定时任务补偿    ....</div>
			</div>
			
		</div>
		
		
		
	</body>
</html>
